<template>
  <div class="dashboard-home">
    <div class="page-header">
      <h1>控制台</h1>
      <p>欢迎回来，{{ authStore.user?.username }}！这里是您的智能去水印控制台。</p>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-grid">
      <a-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon">
            <PictureOutlined />
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ stats.monthlyImages }}</div>
            <div class="stat-label">本月处理图片</div>
          </div>
        </div>
      </a-card>

      <a-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon">
            <VideoCameraOutlined />
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ stats.monthlyVideos }}</div>
            <div class="stat-label">本月处理视频</div>
          </div>
        </div>
      </a-card>

      <a-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon">
            <ClockCircleOutlined />
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ stats.pendingTasks }}</div>
            <div class="stat-label">待处理任务</div>
          </div>
        </div>
      </a-card>

      <a-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon">
            <CheckCircleOutlined />
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ stats.successRate }}%</div>
            <div class="stat-label">成功率</div>
          </div>
        </div>
      </a-card>
    </div>

    <!-- 快速操作 -->
    <div class="quick-actions">
      <h2>快速操作</h2>
      <div class="actions-grid">
        <a-card class="action-card" @click="goToUpload">
          <div class="action-content">
            <div class="action-icon">
              <CloudUploadOutlined />
            </div>
            <h3>上传文件</h3>
            <p>上传图片或视频进行去水印处理</p>
          </div>
        </a-card>

        <a-card class="action-card" @click="goToHistory">
          <div class="action-content">
            <div class="action-icon">
              <HistoryOutlined />
            </div>
            <h3>处理历史</h3>
            <p>查看历史处理记录和下载结果</p>
          </div>
        </a-card>

        <a-card class="action-card" @click="goToProfile">
          <div class="action-content">
            <div class="action-icon">
              <UserOutlined />
            </div>
            <h3>个人资料</h3>
            <p>管理您的账户信息和设置</p>
          </div>
        </a-card>
      </div>
    </div>

    <!-- 最近任务 -->
    <div class="recent-tasks">
      <h2>最近任务</h2>
      <a-table
        :columns="columns"
        :data-source="recentTasks"
        :pagination="false"
        size="small"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <a-tag :color="getStatusColor(record.status)">
              {{ getStatusText(record.status) }}
            </a-tag>
          </template>
          <template v-else-if="column.key === 'action'">
            <a-button type="link" size="small" @click="viewTask(record)">
              查看
            </a-button>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../../stores/auth'
import {
  PictureOutlined,
  VideoCameraOutlined,
  ClockCircleOutlined,
  CheckCircleOutlined,
  CloudUploadOutlined,
  HistoryOutlined,
  UserOutlined
} from '@ant-design/icons-vue'

const router = useRouter()
const authStore = useAuthStore()

const stats = reactive({
  monthlyImages: 156,
  monthlyVideos: 23,
  pendingTasks: 3,
  successRate: 98.5
})

const recentTasks = ref([
  {
    id: 1,
    fileName: 'sample-image.jpg',
    type: 'image',
    status: 'completed',
    createdAt: '2024-01-15 14:30:00'
  },
  {
    id: 2,
    fileName: 'video-sample.mp4',
    type: 'video',
    status: 'processing',
    createdAt: '2024-01-15 13:45:00'
  },
  {
    id: 3,
    fileName: 'document.png',
    type: 'image',
    status: 'failed',
    createdAt: '2024-01-15 12:20:00'
  }
])

const columns = [
  {
    title: '文件名',
    dataIndex: 'fileName',
    key: 'fileName'
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
    customRender: ({ text }) => text === 'image' ? '图片' : '视频'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '创建时间',
    dataIndex: 'createdAt',
    key: 'createdAt'
  },
  {
    title: '操作',
    key: 'action'
  }
]

const getStatusColor = (status) => {
  const colorMap = {
    completed: 'success',
    processing: 'processing',
    failed: 'error',
    pending: 'warning'
  }
  return colorMap[status] || 'default'
}

const getStatusText = (status) => {
  const textMap = {
    completed: '已完成',
    processing: '处理中',
    failed: '失败',
    pending: '等待中'
  }
  return textMap[status] || status
}

const goToUpload = () => {
  router.push('/dashboard/upload')
}

const goToHistory = () => {
  router.push('/dashboard/history')
}

const goToProfile = () => {
  router.push('/dashboard/profile')
}

const viewTask = (task) => {
  router.push(`/dashboard/history?taskId=${task.id}`)
}

onMounted(() => {
  // 这里可以加载真实的数据
  console.log('Dashboard home mounted')
})
</script>

<style scoped>
.dashboard-home {
  max-width: 1200px;
}

.page-header {
  margin-bottom: 32px;
}

.page-header h1 {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.page-header p {
  color: #666;
  margin: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.stat-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  font-size: 32px;
  color: #1890ff;
  background: #f0f8ff;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.stat-label {
  color: #666;
  font-size: 14px;
}

.quick-actions {
  margin-bottom: 40px;
}

.quick-actions h2 {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 24px;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.action-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

.action-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.action-content {
  text-align: center;
  padding: 16px;
}

.action-icon {
  font-size: 48px;
  color: #1890ff;
  margin-bottom: 16px;
}

.action-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.action-content p {
  color: #666;
  margin: 0;
}

.recent-tasks h2 {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .actions-grid {
    grid-template-columns: 1fr;
  }
}
</style> 